<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery操作DOM</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>

<body>
    <div>
        <span>第1个span</span>
        <span>第2个span
            <span id="inner">最里面的span
                <a href="">1</a>
                <a href="">2</a>
                <a href="">3</a>
            </span>
            <span>小兄弟</span>
        </span>
    </div>
    <div>
        下面的div
        <p>
            今天是2021年3月19日
        </p>
        <p>
            第2个p标签
        </p>
    </div>
    <script>
        var inner = $('#inner');
        console.log('目标元素：', inner); // 元素本身
        console.log(inner.next().html()); // 下一个兄弟元素
        // console.log(document.getElementById('inner').nextElementSibling.innerHTML);
        console.log('父元素：',inner.parent().html()); // 父元素
        console.log('子元素：', inner.children()[1]); // 第2个子元素
        console.log('最远的p标签：', inner.parent().parent().next().children().html());
        /*
            DOM元素关系：父子，兄弟
            兄弟：next() ， prev()
            父子：parent() ，children()    不常用：parents()所有祖先
                children()[下标]获取到的元素，是HTML的标签，不是jQuery元素，需要进行转换
                children()可以直接使用第1个子元素的所有方法

        */
    </script>
</body>

</html>